<template>
  <div class="wrapper" ref="wrapper">
    <div class="content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
import BScroll from "better-scroll";
// 导入防抖函数
import { debounce } from "@/common/utils/debounce.js";

export default {
  props: {
    // 是否允许监听滚动+类型
    probeType: {
      type: Number,
      default: 1
    },
    // 是否允许上拉加载
    pullUpLoad: {
      type: Boolean,
      default: false
    },
    data: { // 需要监听的数据，需要refresh所以需要监听
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  data() {
    return {
      scroll: {} // 存储当前scroll对象，通过this.scroll拿到
    };
  },
  mounted() {
    setTimeout(this.__initScroll, 20);
  },
  methods: {
    __initScroll() {
      // 1:初始化BScroll对象
      // if (!this.$refs.wrapper) return;
      this.scroll = new BScroll(this.$refs.wrapper, {
        probeType: this.probeType, // probeType：监听滚动+类型；0,1默认不监听，2,手指滑动监听，不包含惯性滚动，3，全部监听 。这里让父组件传参来决定是否开启监听
        click: true, // 是否允许wrapper中内容可以点击，button默认可以点击，但是div不行，必须开启。
        pullUpLoad: this.pullUpLoad // 是否允许上拉加载
      });

      // 2：监听滚动的位置，在此拿到滚动事件（携带了参数pos，包涵X、Y轴信息），发送自定义事件给父组件使用）
      this.scroll.on("scroll", pos => {
        this.$emit("scroll", pos);
      });

      // 3：监听scroll滚动到底部、将上拉加载事件发送出去
      if (this.pullUpLoad) {
        this.scroll.on("pullingUp", () => {
          this.$emit("pullingUp");
        });
      }

    },

    scrollTo(x, y, time) {  // 滚动到指定位置函数
      return (
        this.scroll && this.scroll.scrollTo && this.scroll.scrollTo(x, y, time)
      );
    },

    refresh() {  // 刷新重新计算scroll高度函数
       console.log('refresh次数');
        this.scroll &&  this.scroll.refresh &&  this.scroll.refresh();
    },

    finishPullUp() {  // 完成上拉加载函数，会不会重新计算高度？
      this.scroll && this.scroll.finishPullUp();
    },

    getScrollY(){ // 获取到当前scroll滚动的y值
      return this.scroll ? this.scroll.y : 0
    }
    
  },
  // watch: { // 已经使用mixin，此方法废弃
  //   data() {
  //     setTimeout(this.refresh, 20);
  //   }
  // }
};
</script>

<style lang='scss' scoped>
//@import '@/assets/css/'; //引入公共css类
</style>